<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="">
				<tr v-for="(g,i) in goods">
					<td>
						{{g.id}}
					</td>
					<td>
						{{g.name}}
					</td>
					<td>
						<img :src="g.img" />
					</td>
					<td>
						{{g.price}}
					</td>
					<td>
						{{g.qty}}
					</td>
					<td>
						<button type="button" @click="del(i)">
						删除
						</button>
					</td>
				</tr>
			</table>
			id:<input type="text" v-model="id"><br />
			name:<input type="text" v-model="name"><br />
			img:<input type="text" v-model="img"><br />
			price:<input type="text" v-model="price"><br />
			qty:<input type="text" v-model="qty"><br />
			<button @click="add">添加</button>
		</div>
		
		<script>
			var app = Vue.createApp({
				data() {
					return {
						id:'',
						name:'',
						price:'',						
						img:'',
						qty:'',
						goods:[
							{
								id:1,
								name:"iPhone14",
								price:8888,
								img:"./img/iphone14.jpg",
								qty:5
							},
							{
								id:2,
								name:"mate40",
								price:3888,
								img:"./img/mate40.jpg",
								qty:3
							},
						]
					}
				},
				methods:{
					add:function(){
						

						var g={
							id:parseInt(this.id),
							name:this.name,
							price:parseFloat(this.price),
							img:this.img,
							qty:this.qty
						}
						this.goods.push(g);
					},
					del:function(i)
					{
						// splice(指定位置，删除几个)
						this.goods.splice(i,1)
					}
				}
			});
			var vm = app.mount("#app")
		</script>

		<script>
			
			// 练习:
			// 参考学生信息管理 制作一个商品管理
			// 实现商品的列表 添加 删除
			// 商品编号  商品名  商品价格  商品图片(img标签 src)   商品库存
			//    1     iPhone14 8888    ./img/iphone14.jpg      5
			//    2     华为mate6 8888    ./img/mate40.jpg      3
			
			
		</script>

	</body>
</html>